<template>
  <a-config-provider :locale="locale">
    <a-layout id="components-layout">
      <a-layout-header class="header">
        <h1 class="title">{{ title }}</h1>
        <div class="user-info">
          <a v-if="!nickName" class="login_title" href="javascript:;" @click="handleLogin">
            登录
          </a>
          <span v-if="nickName" style="margin-right:25px">欢迎您，{{ nickName }}</span>
          <a v-if="nickName" class="logout_title" href="javascript:;" @click="handleLogout">
            <a-icon type="logout"/>
            <span>&nbsp;退出登录</span>
          </a>
        </div>
        <login-modal ref="modalForm" @ok="modelFormOk"></login-modal>
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="150" style="background: #fff">
          <a-menu
            mode="inline"
            :inlineIndent="12"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :style="{ height: '100%', borderRight: 0}" >
            <a-sub-menu v-for="item in menuData" :key="item.id" v-if="item.isPlugin">
              <span slot="title"><a-icon :type="item.icon" />{{ item.text }}</span>
              <template v-for="menu in item.children" v-if="menu.component==='/layouts/IframePageView'">
                <a-menu-item v-if="menu.children===undefined" :key="menu.id" @click="handleUrl(menu.url)">
                  <a-icon :type="menu.icon" />{{ menu.text }}
                </a-menu-item>
                <a-sub-menu v-if="menu.children!==undefined" :key="menu.id">
                  <span slot="title"><a-icon type="plus-square" />{{ menu.text }}</span>
                  <a-menu-item v-for="smallMenu in menu.children" :key="smallMenu.id" @click="handleUrl(smallMenu.url)">
                    <a-icon :type="smallMenu.icon" />{{ smallMenu.text }}
                  </a-menu-item>
                </a-sub-menu>
              </template>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 5px 5px">
          <a-breadcrumb style="margin: 5px 0; padding:5px 5px 5px 25px; background: #fff">
            <a-breadcrumb-item style="color: #1890ff">{{ menuText }}</a-breadcrumb-item>
          </a-breadcrumb>
          <a-layout-content
            :style="{ background: '#fff', padding: 0, margin: 0, minHeight: '280px' }">
            <iframe id="page" :src="url" frameborder="0" width="100%" :height="height" scrolling="auto"></iframe>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>

<script>
  import Vue from 'vue'
  import { logout } from "@/api/login"
  import { queryPermissionsByUser } from "@/api/api"
  import LoginModal from '@/components/tools/LoginModal'
  import { ACCESS_TOKEN,USER_INFO,UI_CACHE_DB_DICT_DATA,USER_ID,USER_LOGIN_NAME,CACHE_INCLUDED_ROUTES } from "@/store/mutation-types"
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  export default {
    name: "Produce",
    components: {
      LoginModal
    },
    data () {
      return {
        locale: zhCN,
        title: '',
        url: '',
        nickName: '',
        collapsed: false,
        menuData: [],
        menuText: '插件页面',
        height: document.documentElement.clientHeight-100
      }
    },
    created() {
      this.loadMenu()
      this.title = window.SYS_TITLE
      if(Vue.ls.get(ACCESS_TOKEN)) {
        let userInfo = Vue.ls.get(USER_INFO)
        this.nickName = userInfo.username
      } else {
        this.$nextTick(() => {
          this.$refs.modalForm.show()
        })
      }
      //设置本地语种（当前网页的语种）。如果不设置，默认就是 'chinese_simplified' 简体中文
      translate.language.setLocal('chinese_simplified');
      translate.service.use('client.edge');
      //翻译时追加上自己想忽略不进行翻译的id的值，凡是在这里面的，都不进行翻译。
      translate.ignore.id.push('langSetting');
      //开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
      translate.listener.start();
      //执行翻译初始化操作，显示出select语言选择
      translate.execute();
      //不显示语言选择标签
      translate.selectLanguageTag.show = false
      //翻译自定义
      translate.nomenclature.append('chinese_simplified','english',`
					管伊佳ERP=GuanYiJia
			`)
    },
    methods: {
      loadMenu() {
        let params = {pNumber:0,userId: Vue.ls.get(USER_ID)}
        queryPermissionsByUser(params).then(res => {
          let menuArr = res
          for (let i = 0; i < menuArr.length; i++) {
            menuArr[i].isPlugin = false
            let menuChildren = menuArr[i].children
            if(menuChildren) {
              for (let j = 0; j < menuChildren.length; j++) {
                if(menuChildren[j].component === '/layouts/IframePageView') {
                  menuArr[i].isPlugin = true
                }
              }
            }
          }
          this.menuData = menuArr
        }).catch(() => {
          this.nickName = ''
          this.handleLogin()
        })
      },
      handleUrl(path) {
        this.url = path? path.substring(path.lastIndexOf('/')+1):''
        this.menuText = '插件页面：' + window.location.href + this.url
      },
      handleLogin() {
        this.$refs.modalForm.show()
      },
      modelFormOk(user) {
        if(user && user.username) {
          this.nickName = user.username
          this.loadMenu()
        } else {
          this.nickName = ''
        }
      },
      handleLogout() {
        const that = this
        this.$confirm({
          title: '提示',
          content: '真的要退出登录吗 ?',
          onOk() {
            logout().then(() => {
              Vue.ls.remove(ACCESS_TOKEN)
              Vue.ls.remove(USER_ID)
              Vue.ls.remove(USER_LOGIN_NAME)
              Vue.ls.remove(USER_INFO)
              Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
              Vue.ls.remove(CACHE_INCLUDED_ROUTES)
              that.nickName = ''
              window.location.href = "/"
            }).catch(() => {
              that.nickName = ''
              that.handleLogin()
            })
          },
          onCancel() {
          },
        })
      }
    }
  }
</script>
<style scoped>
  #components-layout .title {
    float: left;
    width: 150px;
    height: 49px;
    line-height: 49px;
    color: #fff;
    font-size: 24px;
    margin: 0 0 20px 20px;
    font-weight: 600;
  }
  #components-layout .header {
    z-index: 2;
    color: #fff;
    height: 49px;
    background-color: #1890ff;
    padding-left: 0px;
    padding-right: 24px;
    transition: background .3s;
  }
  #components-layout .user-info {
    float: right;
    color: inherit;
    line-height: 49px;
  }
  .login_title {
    color: inherit;
  }
  .logout_title {
    color: inherit;
    text-decoration: none;
  }
  .menu ul li {
    cursor: pointer;
    text-decoration: underline;
    color: #2d7bf4;
  }
</style>